<template>
  <div class="order-box w-card">
    <div class="title-box">
      <span class="title">订单ID：{{ orderForm.sysOrderId || '' }}</span>
      <el-button v-show="orderForm.seeAll" style="margin-left: auto;" @click="tuomin"
        :loading="loading">{{ isTuoM ? '查看完整信息' : '脱敏展示' }}</el-button>
    </div>
    <div class="order-info">
      <div class="f-title">订单基本信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>代理商：</span>
          <span>{{ orderForm.shopName || '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>订单状态：</span>
          <span>{{ orderForm.orderStatus == 5 ? '待支付' : orderForm.orderStatus == 10 ? '订单进行中' : orderForm.orderStatus == 20 ? '受理成功' : orderForm.orderStatus == 30 ? '订单异常结束' : orderForm.orderStatus == 40 ? '订单异常待处理' : '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>创建时间：</span>
          <span>{{ orderForm.createTime ? getDateTime(orderForm.createTime)[6] : '' }}</span>
        </el-col>
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>激活状态：</span>
          <span>{{ orderForm.activeStatus == 0 ? '未激活' : orderForm.activeStatus == 10 ? '已下单' : orderForm.activeStatus == 12 ? '激活中' : orderForm.activeStatus == 14 ? '下单失败' : orderForm.activeStatus == 20 ? '激活成功' : orderForm.activeStatus == 22 ? '激活成功且充值成功' : orderForm.activeStatus == 30 ? '激活失败' : '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>充值时间：</span>
          <span>{{ orderForm.chargeTime ? getDateTime(orderForm.chargeTime)[6] : '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>激活时间：</span>
          <span>{{ orderForm.activeTime ? getDateTime(orderForm.activeTime)[6] : '' }}</span>
        </el-col>
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>首充说明：</span>
          <span>{{ orderForm.chargeResult || '' }}</span>
        </el-col>
        <el-col :span="12">
          <span>备注信息：</span>
          <span>{{ orderForm.orderStatusMsg || '' }}</span>
        </el-col>
      </el-row>
      <div class="f-title">证件信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>证件姓名：</span>
          <span>{{ orderForm.idcardName || '' }}</span>
        </el-col>
        <el-col :span="8">
          <span>证件号码：</span>
          <span>{{ orderForm.idcardNum || '' }}</span>
        </el-col>
      </el-row>
      <!-- <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>证件照片：</span>
          <div>
            <img v-for="item in orderForm." src="" alt="">
          </div>
        </el-col>
      </el-row> -->
      <div class="f-title">收件信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>收件人：</span>
          <span>{{ orderForm.receiverName || '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>联系电话：</span>
          <span>{{ orderForm.receivePhone || '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>收货地址：</span>
          <span>{{ orderForm.receiveAddress || '' }}</span>
        </el-col>
      </el-row>
      <div class="f-title">商品信息</div>
      <div class="dislf">
        <div>
          <img :src="orderForm.headImg" alt="">
        </div>
        <div>
          <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
            <el-col :span="8">
              <span>商品名称：</span>
              <span>{{ orderForm.goodsName || '' }}</span>
            </el-col>
            <el-col :span="8">
              <span>商品编码：</span>
              <span>{{ orderForm.goodsId || '' }}</span>
            </el-col>
          </el-row>
          <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
            <el-col :span="8">
              <span>上游对接平台：</span>
              <span>{{ orderForm.channelName || '' }}</span>
            </el-col>
            <el-col :span="8">
              <span>上游平台商户：</span>
              <span>{{ orderForm.channnelShopName || '' }}</span>
            </el-col>
          </el-row>
          <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
            <el-col :span="8">
              <span>上游商品编码：</span>
              <span>{{ orderForm.channelGoodsCode || '' }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="f-title">生产信息</div>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <el-col :span="6">
          <span>生产号码：</span>
          <span>{{ orderForm.goodsPhone || '' }}</span>
        </el-col>
        <!-- <el-col :span="6">
          <span>ICCID：</span>
          <span>{{ orderForm.receivePhone || '' }}</span>
        </el-col> -->
      </el-row>
      <el-row class="padx20 info-box" :gutter="20" style="margin-top: 10px;">
        <!-- <el-col :span="6">
          <span>物流状态：</span>
          <span>{{ orderForm.receiverName || '' }}</span>
        </el-col> -->
        <el-col :span="6">
          <span>物流公司：</span>
          <span>{{ orderForm.logisticsName || '' }}</span>
        </el-col>
        <el-col :span="6">
          <span>物流单号：</span>
          <span>{{ orderForm.logisticsNum || '' }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { warningDeal, getDateTime } from '../../../utils/utils'
import api from '../api'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()

    const state = reactive({
      loading: false,
      isTuoM: true,
      orderForm: {},
    })

    function getOrderDetail(sysOrderId) {
      if (!sysOrderId) return
      const obj = {
        sysOrderId
      }
      api.orderDetail(obj).then(res => {
        if (res.code == '200') {
          state.orderForm = res.data
          state.isTuoM = true
        } else {
          warningDeal(res.msg)
        }
        state.loading = false
      }).catch(err => {
        console.log(err)
        state.loading = false
      })
    }

    function getTOrderDetail(sysOrderId) {
      if (!sysOrderId) return
      const obj = {
        sysOrderId
      }
      api.undesensitization(obj).then(res => {
        if (res.code == '200') {
          state.orderForm = { ...state.orderForm, ...res.data }
          state.isTuoM = false
        } else {
          warningDeal(res.msg)
        }
        state.loading = false
      }).catch(err => {
        console.log(err)
        state.loading = false
      })
    }

    function tuomin() {
      state.loading = true
      const orderId = route.query.sysOrderId
      if (state.isTuoM) {
        getTOrderDetail(orderId)
      } else {
        getOrderDetail(orderId)
      }
    }

    onMounted(() => {
      const orderId = route.query.sysOrderId
      getOrderDetail(orderId)
    })

    return {
      ...toRefs(state),
      getDateTime,
      tuomin,
    }
  }
}
</script>

<style lang="scss" scoped>
.order-box {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-flow: column;
  .title-box {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }
  .order-info {
    margin-top: 10px;
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}
.f-title {
  box-sizing: border-box;
  padding: 10px 0;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
  font-weight: bold;
  margin-top: 20px;
}
.padx20 {
  box-sizing: border-box;
  padding: 0 20px;
}
.padxy20 {
  box-sizing: border-box;
  padding: 20px;
}
.info-box {
  > .el-col {
    span {
      font-size: 14px;
    }
    > span:last-of-type {
      color: #5a5a5a;
    }
    > .titleText {
      color: #000000 !important;
    }
  }
}
.dislf {
  margin-top: 10px;
  display: flex;
  align-items: center;
  > div:first-of-type {
    width: 150px;
    > img {
      width: 100%;
    }
  }
  > div:last-of-type {
    flex-grow: 1;
  }
}
</style>